<template>
<div v-if="show !== false?true:value" v-show="show !== false?value:true">
	<div class="fix" :style="{'z-index': zIndex}">
		<div class="bg" v-if="bg" :style="{background:'rgba(0,0,0,'+bg+')'}" @click="on.close()"></div>
		<div class="cen" ref="win">
			<div class="tit">
				<div class="t" ref="title">{{title}}</div>
				<div class="i" v-if="close"><svg @click="on.send();" t="1615973887355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3771" width="48" height="48"><path d="M583.168 523.776L958.464 148.48c18.944-18.944 18.944-50.176 0-69.12l-2.048-2.048c-18.944-18.944-50.176-18.944-69.12 0L512 453.12 136.704 77.312c-18.944-18.944-50.176-18.944-69.12 0l-2.048 2.048c-19.456 18.944-19.456 50.176 0 69.12l375.296 375.296L65.536 899.072c-18.944 18.944-18.944 50.176 0 69.12l2.048 2.048c18.944 18.944 50.176 18.944 69.12 0L512 594.944 887.296 970.24c18.944 18.944 50.176 18.944 69.12 0l2.048-2.048c18.944-18.944 18.944-50.176 0-69.12L583.168 523.776z" p-id="3772" fill="#333333"></path></svg></div>
			</div>
			<div class="body" :style="{maxWidth:ww+'px',maxHeight:hh-43+'px'}">
				<div class="slot"><slot :data="data"></slot></div>
				<div class="buts" v-if="buts && buts.length">
					<el-button v-for="(v,k) in buts" :key="k" v-bind="v" @click="v.click">{{v.name}}</el-button>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<script>
export default {
	props:{
		show:{default(){return false}},
		appendToBody:{default(){return false}},
		value:{default(){return false}},
		data:{default(){return {}}},
		bg:{default(){return 0.25}},
		close:{default(){return true}},
		bgclose:{default(){return false}},
		title:{default(){return '消息'}},
		buts:{default(){return []}},
		zIndex:{default(){return 3000}}
	},
	data(){
		var vue = this;
		return {
			ww:document.documentElement.clientWidth,
			hh:document.documentElement.clientHeight,
			on:{
				close(){
					if(vue.bgclose !== false){
						vue.on.send();
					}
				},
				send(){
					vue.$emit('input',false);
					vue.$emit('close');
				},
				async up(d){
					if(d){
						window.addEventListener('resize',vue.onresize);

						await new Promise(ok=>vue.$nextTick(ok))

						if(vue.appendToBody !== false && vue.show === false){
							document.body.appendChild(vue.$el);
						}

						vue.$refs.title.onmousedown = vue.init
						document.addEventListener('mouseup',function(e){
							document.removeEventListener('mousemove',vue.onmove);
						});
					}else{
						if(vue.$refs.win){
							window.removeEventListener('resize',vue.onresize);

							vue.x3 = 0;
							vue.y3 = 0;

							vue.$refs.win.style.top = '0px';
							vue.$refs.win.style.left = '0px';
						}
					}
				}
			},
			onresize(){
				vue.ww = document.documentElement.clientWidth;
				vue.hh = document.documentElement.clientHeight;

				if(
					(vue.x3 && vue.$refs.win.offsetLeft < 0) ||
					(document.documentElement.clientWidth - vue.$refs.win.offsetLeft - vue.$refs.win.offsetWidth < 0)
				){
					vue.x3 = 0;
					vue.$refs.win.style.left = vue.x3 + "px";
				}

				if(
					(vue.y3 && vue.$refs.win.offsetTop < 0) ||
					(document.documentElement.clientHeight - vue.$refs.win.offsetTop - vue.$refs.win.offsetHeight < 0)
				){
					vue.y3 = 0;
					vue.$refs.win.style.top = vue.y3 + "px";
				}
			}
		}
	},
	watch:{
		value(d){
			var vue = this;

			vue.on.up(d);
		}
	},
	created(){
		var vue = this;

		vue.x3 = 0;
		vue.y3 = 0;
		var x,y,x2,y2,w,h;
		vue.onmove = function(e){
			if((e.clientX - x2 >= 0) && (document.documentElement.clientWidth >= e.clientX - x2 + w)){
				vue.x3 = e.clientX - x - x2;
				vue.$refs.win.style.left = vue.x3 + "px";
			}else if(!(e.clientX - x2 >= 0)){
				if(vue.x3 !== -x){
					vue.x3 = -x;
					vue.$refs.win.style.left = vue.x3 + "px";
				}
			}else{
				if(vue.x3 !== x){
					vue.x3 = x;
					vue.$refs.win.style.left = vue.x3 + "px";
				}
			}

			if((e.clientY - y2 >= 0) && (document.documentElement.clientHeight >= e.clientY - y2 + h)){
				vue.y3 = e.clientY - y - y2;
				vue.$refs.win.style.top = vue.y3 + "px";
			}else if(!(e.clientY - y2 >= 0)){
				if(vue.y3 !== -y){
					vue.y3 = -y;
					vue.$refs.win.style.top = vue.y3 + "px";
				}
			}else{
				if(vue.y3 !== y){
					vue.y3 = y;
					vue.$refs.win.style.top = vue.y3 + "px";
				}
			}
		}

		vue.init = function(e){
			x = vue.$refs.win.offsetLeft - vue.x3;
			y = vue.$refs.win.offsetTop - vue.y3;

			x2 = e.offsetX;
			y2 = e.offsetY;

			w = vue.$refs.win.offsetWidth;
			h = vue.$refs.win.offsetHeight;

			document.addEventListener('mousemove',vue.onmove);
		}
	},
	mounted(){
		var vue = this;

		if(vue.show !== false){
			document.body.appendChild(vue.$el);
		}

		vue.on.up(vue.value)
	},
	destroyed(){
		window.removeEventListener('resize',this.onresize);
	}
}
</script>

<style scoped lang="less">
.fix{
	position: fixed;top:0;left:0;width:100%;height: 100%;
	text-align: center;white-space:nowrap;
	&:after{content: '';display: inline-block;vertical-align:middle;width:0;height: 100%;}
	>.bg{
		position:absolute;z-index: 1001;top:0;left:0;width:100%;height: 100%;
	}
	>.cen{
		background: #fff;
		border-radius: 2px;box-shadow: 1px 1px 50px rgba(0,0,0,.3);
		display:inline-block;vertical-align:middle;position: relative;z-index: 1002;
		text-align: left;
		>.tit{
			display: flex;align-items:center;user-select: none;
			border-bottom: 1px solid #eee;user-select:none;-webkit-user-select:none;
			background-color: #F8F8F8;border-radius: 2px 2px 0 0;
			.t{
				flex:1;width:0;overflow: hidden;text-overflow: ellipsis;
				color: #333;height: 42px;line-height: 42px;padding:0 15px;
				cursor: move;
			}
			.i{
				padding:0 15px;
				.icon{
					cursor: pointer;height: 14px;width: 14px;
					&:hover{
						path{
							fill:#777;
						}
					}
				}
			}
		}
		>.body{
			border-radius: 0 0 2px 2px;overflow:auto;white-space: normal;
			>.slot{
				min-width: 260px;min-height: 118px;
			}
			>.buts{
				border-top:1px solid #f3f3f3;
				text-align: right;
				padding:8px;
			}
		}
	}
}
</style>